<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabView Example - Basic From Partial Existing Markup</title>
<link rel="stylesheet" type="text/css" href="css/example.css">

<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="../../build/tabview/assets/border_tabs.css">
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/tabview/tabview.js"></script>


<style type="text/css">
#demo { width:30em; }
#demo .yui-content { padding:1em; } /* pad content container */
</style>

<script type="text/javascript">
(function() {
    var tabView = new YAHOO.widget.TabView({ id: 'demo' });

    
    YAHOO.util.Event.onContentReady('nav', function() {
        var labels = this.getElementsByTagName('a'); // extract labels from "nav" links

        for (var i = 0, len = labels.length; i < len; i++) {
            tabView.addTab( new YAHOO.widget.Tab({
                label: labels[i].innerHTML,
                content: '<h2>' + labels[i].innerHTML + 
                         '</h2><p>Lorem ipsum dolor.</p>'
            }));
        }

        tabView.set('activeIndex', 0); // make first tab active
        
        tabView.appendTo(this.parentNode, this); // insert before "nav"
        this.parentNode.removeChild(this); // remove "nav"
    });
})();
</script>

<style type="text/css">
#demo .yui-content {
    height:8em;
}
</style>

</head>
<body>
<div id="doc">
    <h1>TabView Example - Basic From Partial Existing Markup</h1>
    <p>This example demonstrates how to create a basic TabView widget from existing markup.</p>

    <ul id="nav">
        <li><a href="#lorem">lorem</a></li>
        <li><a href="#ipsum">ipsum</a></li>
        <li><a href="#dolor">dolor</a></li>
    </ul>
</div>
</body>
</html>
